<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header>
      <span class="head-title">地震大数据平台</span>
    </el-header>
    <!-- 页面主体区 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px">
        <!-- 侧边栏菜单区域 -->
        <el-menu
          background-color="#333744"
          text-color="#fff"
          active-text-color="#ffd04b"
          :router="true"
        >
          <!-- 一级菜单1 -->
          <el-menu-item index="/warn">
            <!-- 一级菜单模板区 -->
            <template slot="title">
              <!-- 图标 -->
              <i class="el-icon-location"></i>
              <!-- 文本 -->
              <span>预警地震</span>
            </template>
          </el-menu-item>

          <!-- 一级菜单2 -->
          <el-submenu index="1">
            <!-- 一级菜单模板区 -->
            <template slot="title">
              <!-- 图标 -->
              <i class="el-icon-location"></i>
              <!-- 文本 -->
              <span>地震信息查询</span>
            </template>
            <!-- 二级菜单1 -->
            <el-menu-item index="/searchInfoByDate">
              <!-- 二级菜单模板区 -->
              <template slot="title">
                <!-- 文本 -->
                <span font-size="10px">按日期</span>
              </template>
            </el-menu-item>
            <!-- 二级菜单2 -->
            <el-menu-item index="/searchInfoByRegion">
              <!-- 二级菜单模板区 -->
              <template slot="title">
                <!-- 文本 -->
                <span font-size="10px">按地区</span>
              </template>
            </el-menu-item>
            <!-- 二级菜单3 -->
            <el-menu-item index="/searchInfoByRank">
              <!-- 二级菜单模板区 -->
              <template slot="title">
                <!-- 文本 -->
                <span font-size="10px">按震级</span>
              </template>
            </el-menu-item>
          </el-submenu>

          <!-- 一级菜单3 -->
          <el-menu-item index="/showInfo">
            <!-- 一级菜单模板区 -->
            <template slot="title">
              <!-- 图标 -->
              <i class="el-icon-location"></i>
              <!-- 文本 -->
              <span>灾情及地震信息显示</span>
            </template>
          </el-menu-item>
          <!-- 一级菜单4 -->
          <el-menu-item index="/infoServer">
            <!-- 一级菜单模板区 -->
            <template slot="title">
              <!-- 图标 -->
              <i class="el-icon-location"></i>
              <!-- 文本 -->
              <span>地震信息服务</span>
            </template>
          </el-menu-item>
          <!-- 一级菜单5 -->
          <el-menu-item index="/chart">
            <!-- 一级菜单模板区 -->
            <template slot="title">
              <!-- 图标 -->
              <i class="el-icon-location"></i>
              <!-- 文本 -->
              <span>折线图显示</span>
            </template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 右侧内部主体 -->
      <el-main>
        <!-- 路由占位符 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.home-container {
  height: 100%;
}

.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
}

.head-title {
  color: white;
  font-size: 190%;
  position: absolute;
  top: 1%;
}

.el-aside {
  background-color: #333744;
}

.el-main {
  background-color: #eaedf1;
}
</style>